<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<button class="btn">发送请求</button>

<script>
// 查看 fetch 文档
// 1.会使用fetch发送get请求
// 2.会使用fetch发送post请求
// 3.发送请求时会设置请求头

// fetch是ajax的替代品，不是ajax的进一步封装，基于Promise设计

let btn = document.querySelector('.btn')
btn.onclick = function (){
    /* // 发送get请求，没有参数
    fetch('http://localhost:8080/goods/test1')// 返回promise对象
    // .then(res=>res.json())// 返回promise对象
    .then((res)=>{
        // console.log( res )// {...}响应对象
        // res.json() 从响应对象中解析出json数据
        return res.json()
    })// 返回promise对象
    .then((data)=>{
        console.log( data )// {name: '张三', age: 23, sex: '男'}
    }) */

    /* // 发送get请求，有参数
    fetch('http://localhost:8080/users/list?a=111&b=222')
    .then(res=>res.json())
    .then((data)=>{
        console.log( data )
    }) */

    /* // 发送post请求，没有参数
    fetch('http://localhost:8080/goods/add',{// 配置对象
        method: 'post'
    })
    .then(res=>res.json())
    .then((data)=>{
        console.log( data )
    }) */

    // 发送post请求，有参数
    fetch('http://localhost:8080/users/login',{// 配置对象
        method: 'post',
        headers: {
            // 'Content-Type': 'application/json'
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        // body: JSON.stringify({"user":"xiaocuo","pass":"123123"})
        body: 'user=jingjing&pass=222222'
    })
    .then(res=>res.json())
    .then((data)=>{
        console.log( data )
    })

}


// 练习：
// 查看 axios 文档
// 1.会使用axios发送get请求
// 2.会使用axios发送post请求
// 3.发送请求时会设置请求头
// 4.其他...

</script>
</body>
</html>